<template>
	<view class="page">
		<view class="head">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item,index) in carts" :key="index">
					<view class="check">
						<text :index="index" class="iconfont icon-check" :class="{'icon-checked':item.is_check}"
							@click="check"></text>
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="item.sku.sku_image" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.sku.good.goods_name}}</text>
							</view>
							<view class="attribute">
								<view class="attr">
									<text>{{item.sku.attr_values}}</text>
								</view>
							</view>
							<view class="price-num">
								<view class="price">
									<text class="min">￥</text>
									<text class="max">{{item.sku.sku_price}}</text>
								</view>
								<view class="num">
									<view class="add">
										<text :cid="item.id" :skuid="item.sku_id" :sid="item.sku_id" class="iconfont icon-jian" @click="sub"></text>
									</view>
									<view class="number">
										<text>{{item.cart_num}}</text>
									</view>
									<view class="add">
										<text :cid="item.id" :skuid="item.sku_id" class="iconfont icon-jia" @click="add"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 购物车失效商品列表 -->
			<view class="lose-efficacy-list">
				<view class="lose-efficacy-title">
					<view class="title">
						<text>失效商品1件</text>
					</view>
					<view class="empty">
						<text>清空失效商品</text>
					</view>
				</view>
				<view class="list" v-for="(item,index) in 2" :key="index">
					<view class="tag">
						<text>失效</text>
					</view>
					<view class="goods" @click="onSkip('goods')">
						<view class="pictrue">
							<image :src="'/static/img/goods_thumb_0'+ (index+1) +'.png'" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)</text>
							</view>
							<view class="explain">
								<text>商品已不能购买，请联系客服进行沟通</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 为你推荐 -->
			<view class="recommend-info">
				<view class="recommend-title">
					<view class="title">
						<image src="/static/wntj_title.png" mode=""></image>
					</view>
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods')" :key="index">
						<view class="pictrue">
							<image :src="item.image" mode="heightFix"></image>
						</view>
						<view class="title-tag">
							<view class="tag" :gid="item.id">
								{{item.goods_name}}
							</view>
						</view>
						<view class="price-info">
							<view class="user-price">
								<text class="min">￥</text>
								<text class="max">{{item.goods_price}}</text>
							</view>
							<view class="vip-price">
								<image src="/static/vip_ico.png"></image>
								<text>￥{{item.original_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 结算 -->
			<view class="close-account">
				<view class="check-total">
					<view class="check">
						<text class="iconfont icon-check"></text>
						<text class="all">全选</text>
					</view>
					<view class="total">
						<text>合计：</text>
						<text class="price">￥{{totalPrice}}</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-calculate" v-if="!isEdit">
						<text @click="jump">去结算</text>
					</view>
					<view class="btn-del" v-else>
						<text class="attention">移入关注</text>
						<text class="del">删除</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
		},
		data() {
			return {
				carts: [],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				isEdit: false,
				goodsList: [],
			};
		},
		onLoad() {
			this.$http.get('store/recommend', {}).then(res => {
				console.log(res.data.data)
				this.goodsList = res.data.data
			})
		},
		onShow() {
			this.$http.get('cart', {}, {}).then(res => {
				console.log(res.data.data)
				var check = {
					is_check: 0
				}
				var cart = res.data.data
				for (let s of cart) {
					s['is_check'] = 0
				}
				console.log(cart)
				this.carts = cart
			})
		},
		onReady() {
			uni.hideTabBar()
		},
		computed: {
			totalPrice: function() {
				let total = 0;
				var data = this.carts
				for (let index in data) {
					if (data[index]['is_check']) {
						total += parseFloat(data[index]['sku']['sku_price']) * parseInt(data[index]['cart_num'])
					}
				}
				console.log(total)
				return total;
			}
		},
		methods: {
			check() {
				var currentIndex = event.target.getAttribute("index")
				var data = this.carts
				for (let index in data) {
					if (index == currentIndex) {
						if (data[index]['is_check']) {
							data[index]['is_check'] = 0
						} else {
							data[index]['is_check'] = 1
						}
					}
				}
				this.carts = data
			},

			add() {
				var cid = event.target.getAttribute("cid")
				var skuid = event.target.getAttribute("skuid")
				this.$http.get('cart/add', {
					uid: 17,
					sku_id: skuid
				}, {}).then(res => {
					console.log(res.data.code)
					if (res.data.code == 200) {
						var cart = this.carts
						for (let index in cart) {
							if (cart[index]['id'] == cid) {
								var num = cart[index]['cart_num']
								num++
								cart[index]['cart_num'] = num
							}
						}
						this.carts = cart
					}
				})
			},
			sub() {
				var cid = event.target.getAttribute("cid")
				var skuid = event.target.getAttribute("skuid")
				this.$http.get('cart/sub', {
					uid: 17,
					sku_id: skuid
				}, {}).then(res => {
					if (res.data.code == 200) {
						var cart = this.carts
						for (let index in cart) {
							if (cart[index]['id'] == cid) {
								var num = cart[index]['cart_num']
								num--
								if(num == 0){
									num = 1
								}
								cart[index]['cart_num'] = num
							}
						}
						this.carts = cart
					}
				})
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			jump(){
				var skuIds=''
				var totalPrice = this.totalPrice
				var data = this.carts
				for (let index in data) {
					if (data[index]['is_check']) {
						skuIds += data[index]['sku_id'] + ","
					}
				}
				 skuIds = skuIds.slice(0,skuIds.length-1)
				uni.navigateTo({
					url: '/pages/ConfirmOrder/ConfirmOrder?skuIds='+skuIds+"&totalPrice="+totalPrice+"&fromCart="+1,
				})
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						var gid = event.target.getAttribute("gid")
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails?goods_id=' + gid,
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'cart.scss';
</style>
